<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueComponent是怎么来的</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<!--
 分析Vue和VueComponent
        1.Weather组件的本质是一个构造波函数
        2.Weather确实是一个构造函数.但不是程序员亲自定义的构造函数.是Vue.extend生成的
        3.我们以后只要去写<Weather/>,Vue底层代码就会帮我们执行new Weather(options)
        4.Vue.extend调用的返回值时VueComponent构造函数 所以new Weather其实就是在new VueComponent
        5.每次调用Vue.extend都是返回一个全新的VueComponent!!!!
        6.所谓的组件实例对象,其实就是VueComponent的实例.以后均简称vc,Vue的实例对象 以后均简称vm
        7.创建组件时,配置选中的data函数,methods的方法,watch中的函数,computed函数中的this均指向vc
        创建vm配置中的data中的函数,methods的方法,watch中的函数,computed函数中的this均指向vm
        8.VueComponent继承了Vue.所以Vue.prototype上的属性和方法 vc都能看得见
-->
<div id="root">

</div>
<script type="text/javascript">
   function Vue(){
       this.p=800
   }
   Vue.prototype.test=()=>{alert('你好')}
    Vue.extend=function (options){
        console.log('我对收到options进行各种各样的使用')
        function VueComponent(){
            //一些复杂的代码
        }
        VueComponent.prototype=Object.create(Vue.prototype)
        VueComponent.prototype.constructor=VueComponent /*组件原型上的构造器重新指向组件 解决了this指向的问题*/
        VueComponent.prototype.x=900
        return VueComponent
    }
    const Weather=Vue.extend({})
   const A=Vue.extend({})
   const B=Vue.extend({})
   const C=Vue.extend({})
   const D=Vue.extend({})

   const w1=new Weather()
   const a=new A()
   const b=new B()
   const c=new C()
   const d=new D()
   console.log(w1)
   console.log(a)
   console.log(b)
   console.log(c)
   console.log(d)

</script>
</body>
</html>